<template>
  <div class="not-found">
    <el-result
      title="抱歉！当前页面不存在..."
      sub-title="请检查您输入的网址是否正确，或点击下面的按钮返回首页"
    >
      <template #icon>
        <el-image :src="Page404" />
      </template>
      <template #extra>
        <el-button type="primary" round size="large" @click="$router.back()">
          {{ countdown }} 返回首页
        </el-button>
      </template>
    </el-result>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'
import Page404 from '@/assets/svgs/404.svg'

const $router = useRouter()
const countdown = ref(5)
const timer = ref(0)

onMounted(() => {
  onCountdown()
})

onBeforeUnmount(() => {
  clearInterval(timer.value)
})
// 倒计时
const onCountdown = () => {
  timer.value = setInterval(() => {
    if (countdown.value) {
      countdown.value--
    } else {
      // $router.back()
      clearInterval(timer.value)
    }
  }, 1000)
}
</script>

<style lang="scss" scoped>
.not-found {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
